<template>
  <div class="address">
    <div class="address-list-wrapper">
      <cube-scroll ref="scroll" class="address" :options="scrollOptions">
        <ul>
          <li
            v-for="(item,index) in addressListFilter"
            :key="index"
            class="address-item border-bottom-1px"
            @click="checkedIndex=index"
          >
            <div class="overview">
              <div class="overview-left">
                <h1 class="score" v-if="item.isDefault">默认</h1>
                <div class="title" v-if="!item.isDefault" @click="setDefault(item.addressId)">设为默认</div>
                <div class="title" @click="edit(item.addressId)">重新编辑</div>
                <div class="rank" v-if="!item.isDefault" @click="delAddressConfirm(itemitem.addressId)">
                  <i class="icon-remove_circle_outline"></i>
                </div>
              </div>
              <div class="overview-right" @click="showPay(item)">
                <div class="score-wrapper">
                  <span class="title">{{item.userName}}</span>
                  <span class="score">{{item.tel}}</span>
                </div>
                <div class="delivery-wrapper">
                  <span class="title">{{item.streetName}}</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </cube-scroll>
    </div>
    <div class="address-add-wrapper">
      <div class="content" @click="add">
        <div class="content-right">
          <div class="text"><i class="icon-add_circle"></i>新增地址</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import NavHeader from 'components/address/Header'
  import NavFooter from 'components/address/Footer'
  import Modal from 'components/address/Modal'
  import { getAddress, delAddress, setDefaultAddr, getCookie } from 'api'
  import axios from 'axios'
  import Qs from 'qs'

  export default{
    data() {
      return {
        limit: 3, // 默认限制3个
        checkedIndex: 0, // 当前选中的索引
        addressList: [], // 地址列表
        modalShow: false // 下一步、弹框提示
      }
    },
    components: {
      NavHeader,
      NavFooter,
      Modal
    },
    computed: {
      addressListFilter() {
        return this.addressList.slice(0, this.limit)
      }
    },
    mounted() {
      this.init()
    },
    created() {
      init()
    },
    methods: {
      init() {
        getAddress({
          openid: getCookie('openid')
        }).then((addressList) => {
          this.addressList = addressList
          this.limit = this.addressList.length
          this.addressList.forEach((item, index) => {
            if (item.isDefault) {
              this.checkedIndex = index
            }
          })
        })
      },
      // 展开
      expand() {
        if (this.limit === 3) {
          this.limit = this.addressList.length
        } else {
          this.limit = 3
        }
      },
      setDefault(addressId) {
        this.addressList.map((item) => {
          if (item.addressId === addressId) {
            item.isDefault = true
          } else {
            item.isDefault = false
          }
        })

        setDefaultAddr({
          openid: getCookie('openid'),
          addressId: addressId
        }).then((addressList) => {
          // do nothing
        })
      },
      delAddressConfirm(addressId) {
        this.addressList.forEach((item, index) => {
          if (item.addressId === addressId) {
            this.addressList.splice(index, 1)
          }
        })

        delAddress({
          openid: getCookie('openid'),
          addressId: addressId
        }).then((addressList) => {
          // do nothing
        })
      },
      next() {
        this.modalShow = true
      },
      add() {
        var addressId = 0
        this.$router.push({ path: `/editAddress/${addressId}` })
      },
      edit(addressId) {
        this.$router.push({ path: `/editAddress/${addressId}` })
      },
      showPay(item) {
        window.selectedAddr = JSON.stringify(item)
        this.$router.push({ path: `/pay` })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .address
    position: fixed
    z-index: 100
    top: 0
    left: 0
    width: 100%
    height: 100%
    text-align: left
    white-space: normal
    background-color: #f5f5f5
    .address-list-wrapper
      position: absolute
      width: 100%
      top: 0
      left: 0
      bottom: 48px
      .overview
        display: flex
        padding: 18px 0
        .overview-left
          flex: 0 0 137px
          padding: 6px 0
          width: 137px
          border-right: 1px solid $color-col-line
          text-align: center
          @media only screen and (max-width: 320px)
            flex: 0 0 120px
            width: 120px
          .score
            margin-bottom: 6px
            line-height: 28px
            font-size: $fontsize-large-xxx
            color: $color-orange
          .title
            margin-bottom: 8px
            line-height: 12px
            font-size: $fontsize-small
            color: $color-dark-grey
          .rank
            line-height: 10px
            font-size: $fontsize-large
            color: $color-light-grey
        .overview-right
          position: relative
          flex: 1
          padding: 6px 24px 6px 24px
          @media only screen and (max-width: 320px)
            padding-left: 6px
            padding-right: 6px
          .score-wrapper
            display: flex
            align-items: center
            margin-bottom: 8px
            .title
              line-height: 18px
              font-size: $fontsize-small
              color: $color-dark-grey
            .star
              margin: 0 12px
            .score
              line-height: 18px
              font-size: $fontsize-small
              color: $color-orange
          .delivery-wrapper
            display: flex
            align-items: center
            .title
              line-height: 18px
              font-size: $fontsize-small
              color: $color-dark-grey
            .delivery
              margin-left: 12px
              font-size: $fontsize-small
              color: $color-light-grey
    .address-add-wrapper
      display: flex
      position: absolute
      left: 0
      bottom: 0
      z-index: 500
      width: 100%
      height: 48px
      background: $color-background-sss
      .content
        flex: 1
        padding: 15px
        text-align:center
        .content-right
          font-size: 18px
          color: $color-light-red
</style>
